<template>
    <div class="sub-filter" v-if="filterData && !filterLoading">
        <div class="item">
            <div class="head">品牌：</div>
            <div class="body">
                <a 
                    @click="selectedBrand(brand)" 
                    :class="{active:filterData.selectedBrandId===brand.id}" 
                    v-for="brand in filterData.brands" 
                    :key="brand.id">
                    {{brand.name}}
                </a>
            </div>
        </div>
        <div class="item" v-for="props in filterData.saleProperties" :key="props.id">
            <div class="head">{{props.name}}：</div>
            <div class="body">
                <a 
                    @click="selectedProp(props,attr)" 
                    :class="{active:props.selectedPropId===attr.id}" 
                    v-for="attr in props.properties" 
                    :key="attr.id">
                    {{attr.name}}
                </a>
            </div>
        </div>
    </div>
    <div v-else class="sub-filter">
        <XtxSkeleton class="item" width="800px" height="40px" />
        <XtxSkeleton class="item" width="800px" height="40px" />
        <XtxSkeleton class="item" width="600px" height="40px" />
        <XtxSkeleton class="item" width="600px" height="40px" />
        <XtxSkeleton class="item" width="600px" height="40px" />
    </div>
</template>
<script>
    import { getSubCategoryFilter } from '@/api/category'
    import { useRoute } from 'vue-router'
    import { reactive, toRefs, watch } from 'vue'
    export default {
        name: 'SubFilter',
        setup(props,{ emit }) {
            const route = useRoute()
            const state = reactive({
                filterData: {},
                filterLoading: false
            })
           
            watch(() => route.params.id,(newVal) =>{
                if(newVal && route.path === `/category/sub/${newVal}`){
                    getSubCategoryFilter(route.params.id).then(({ result }) => {
                        state.filterLoading = true
                        result.selectedBrandId = null
                        result.brands.unshift({ id: null, name: '全部' })
                        result.saleProperties.forEach(props => {
                            props.selectedPropId = null
                            props.properties.unshift({ id: null, name: '全部' })
                        })
                        state.filterData = result
                        state.filterLoading = false
                    })
                }
            },{
                immediate:true
            })
            // 拼接筛选参数
            const getFilterData = () =>{
                const filterParams = {}
                const attrs = []
                filterParams.brandId = state.filterData.selectedBrandId
                state.filterData.saleProperties.forEach(sItem =>{
                    if(sItem.selectedPropId){
                        const props = sItem.properties.find(pItem => pItem.id === sItem.selectedPropId)
                        attrs.push({
                            groupName:sItem.name,
                            propertyName:props.name
                        })
                    }
                })
                if (attrs.length) filterParams.attrs = attrs
                return filterParams
            }
            const selectedBrand = (brand) =>{
                state.filterData.selectedBrandId =  brand.id
                emit('filter-change',getFilterData())
            }
            const selectedProp = (props,attr) =>{
                props.selectedPropId = attr.id
                emit('filter-change',getFilterData())
            }
            return {
                selectedBrand,
                selectedProp,
                ...toRefs(state)
            }
        }
    }
</script>
<style scoped lang='less'>
    // 筛选区
    .sub-filter {
        background: #fff;
        padding: 25px;

        .item {
            display: flex;
            line-height: 40px;

            .head {
                width: 80px;
                color: #999;
            }

            .body {
                flex: 1;

                a {
                    margin-right: 36px;
                    transition: all .3s;
                    display: inline-block;

                    &.active,
                    &:hover {
                        color: @xtxColor;
                    }
                }
            }
        }
    }
</style>